<template>
	<view class="contents" :style="'height:'+screenHeight+'px;'">
			<view class="top">
				<u-subsection :list="list" v-model="current" @change="changes" mode="button" active-color="#ffffff"
					button-color="#3B71E8" bg-color="#ffffff"></u-subsection>
			</view>

		<view class="middle" v-if="show">
			<view class="bodys" v-for="(item,index) in orderlist" :key="index" >
				<view class="leftf" @click="detail(item.biz_ord_no)">
					<view class="date">
						<span>{{month}}</span>
						<span>{{day}}</span>
					</view>
					<view class="information">
						<span class="gray">就诊人：<span class="black">{{item.patn_name}}</span></span>
						<span class="primary">{{item.VisitTime}}</span>
						<span class="gray">科室：<span class="black">{{item.dept_name}}</span></span>
						<span class="gray">医师：<span class="black">{{item.dr_name}}</span></span>
					</view>
					<view class="rightbutton">
						<view class="label" style="background-color: #E6A23C;" v-if="item.ordr_stas=='01'">
							<span>等待支付</span>
						</view>
						<view class="label" style="background-color: #C0C0C0;" v-if="item.ordr_stas=='06'">
							<span>已退号</span>
						</view>
						<view class="label" style="background-color: #C0C0C0;" v-if="item.ordr_stas=='05'">
							<span>已取消</span>
						</view>
						<view class="label" style="background-color: #C0C0C0;" v-if="item.ordr_stas=='07'">
							<span>已作废</span>
						</view>
						<view class="label" style="background-color: #27BF86;" v-if="item.ordr_stas=='02'">
							<span>已预约</span>
						</view>
						<view class="label" style="background-color: #0197F6;" v-if="item.ordr_stas=='03'">
							<span>已就诊</span>
						</view>
						<view class="label" style="background-color: #C0C0C0;" v-if="item.ordr_stas=='04'">
							<span>已过号</span>
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<view class="none" v-else>
			<view class="coent" >
				<u-empty text="当前暂无记录" mode="data" icon="/static/zwnr.png" icon-size="200">
				</u-empty>
			</view>
		</view>
		<u-modal :show="deleteshow" :showCancelButton="true" :title="title" :content='content' @confirm="confirm()"
			@cancel="deleteshow=false"></u-modal>
		<u-modal :show="showdeletes" :showCancelButton="true" :title="deletetitle" :content='deletecontent'
			@confirm="deletesconfirm()" @cancel="showdeletes=false"></u-modal>
		<u-modal :show="showrefund" :showCancelButton="true" :title="refundtitle" :content='refundcontent'
			@confirm="refundconfirm()" @cancel="showrefund=false"></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				screenHeight: getApp().globalData.screenHeight-44,
				list: [{
						Status: '',
						name: '全部'
					},
					{
						Status: '01',
						name: '待支付'
					},
					{
						Status: '02',
						name: '已预约'
					},
					{
						Status: '03',
						name: '已就诊'
					},
					{
						Status: '04',
						name: '已过号'
					},
					{
						Status: '06',
						name: '已退费'
					}
				],
				current: 0,
				showdeletes: false,
				deleteshow: false,
				showrefund: false,
				page: 1,
				rows: 20,
				Status: '',
				orderlist: [],
				title: '取消预约',
				content: '取消预约之后不可恢复，是否确认',
				deletetitle: '删除预约记录',
				deletecontent: '删除预约记录之后不可恢复，是否确认',
				refundtitle: '退款',
				refundcontent: '退款之后不可恢复，是否确认',
				OrderNumber: '',
				openid: '',
				month:'',
				day:'',
				show:true
			}
		},
		computed: {
			...mapState(['token'], ['userInfo']),
			...mapGetters(['hasLogin', 'getUserInfo'])
		},
		onShow() {
			this.recordlist()
		},
		onLoad:function(option){
			if(option.current){
				this.current=option.current
			}else{
				
			}
			if (this.hasLogin) {
				this.$store.dispatch('getUserInfo');
				this.recordlist()
			} else {
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '登录后才可以操作',
					confirmText: '去登录',
					showCancel: false,
					success: function(res) {
						uni.reLaunch({
							url: '/pages/auth/login'
						})
					}
				});
				return;
			}
		},
		methods: {
			detail(biz_ord_no){
				console.log("biz_ord_no",biz_ord_no)
				uni.navigateTo({
					url:`/pages/Yibao/index/index?biz_ord_no=${biz_ord_no}`,
					fail(error) {
						console.log(error)
					}
				})
			},
			getMpWxCode(OrderNumber) {
				uni.login({
					success: async resCode => {
						console.log("rescode", resCode)
						let res = await this.$request('auth', 'getopenid', {
							Code: resCode.code
						});

						if (res.code === 1) {
							console.log("res", res)
							this.appid = res.data.appid;
							this.sessionkey = res.data.session_key;
							this.openid = res.data.openid;
							this.pays(OrderNumber)
						}
					}
				})
			},

			pays(OrderNumber) {
				console.log(OrderNumber)
				this.$request("pay", "pay", {
					OrderNo: OrderNumber,
					openid: this.openid,
				}).then(resto => {
					console.log(resto)
					if (resto.code == 1) {
						uni.showLoading({
							title: '请等待'
						})
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: resto.data.Timestamp,
							package: resto.data.Package,
							nonceStr: resto.data.Noncestr,
							signType: resto.data.SignType,
							paySign: resto.data.paySign,
							success: (resshree) => {
								console.log(resshree)

								uni.hideLoading();
								this.recordlist()
							},
							fail: (err) => {
								console.log(err)
								uni.hideLoading();
								this.recordlist()
							}

						})

					}

				})

			},
			changes(index) {
				console.log(index)
				this.current = index
				this.Status = this.list[index].Status
				console.log("this.list[index].Status", this.Status)
				this.recordlist()
			},
			deletesconfirm() {
				//console.log(this.OrderNumber)
				this.$request("Order", "Delete", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.showdeletes = false
						this.recordlist()
						console.log(res)
					}
				})
			},
			refundconfirm() {
				console.log(this.OrderNumber)
				this.$request("pay", "refund", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.showrefund = false
						this.recordlist()
						console.log(res)
					}
				})
			},
			confirm() {
				console.log(this.OrderNumber)
				this.$request("Order", "Cancel", {
					OrderNo: this.OrderNumber
				}).then(res => {
					if (res.code == 1) {
						this.deleteshow = false
						console.log(res)
					}
				})
			},
			removes(OrderNumber) {
				this.OrderNumber = OrderNumber
				this.deleteshow = true
			},
			refund(OrderNumber) {
				this.OrderNumber = OrderNumber
				this.showrefund = true
			},
			deletesd(OrderNumber) {
				this.showdeletes = true
				this.OrderNumber = OrderNumber
			},
			formattedDatemonth(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					month: 'short'
				}).replace(/\//g, '月');
			},
			formattedDateday(VisitDay) {
				const date = new Date(VisitDay);
				return date.toLocaleDateString('zh-CN', {
					day: 'numeric'
				}).replace(/\//g, '月');
			},
			recordlist() {
				uni.showLoading({
					title: '加载中'
				})
				this.Status = this.list[this.current].Status
				this.orderlist=[]
				this.$request("HisRegist", "List", {
					page: this.page,
					rows: this.rows,
					Status: this.Status
				}).then(res => {
					if (res.code == 1) {
						this.orderlist = res.data.rows
						if(this.orderlist.length!=0){
							this.show=true
							this.month=this.formattedDatemonth(res.data.rows[0].ordr_reg_time)
							this.day=this.formattedDateday(res.data.rows[0].ordr_reg_time)
						}else{
							this.show=false
						}
						uni.hideLoading();
						console.log(res)
					}else{
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style>
	@import './record.css'
</style>